<template>
  <div class="profile-container">
    <!-- header部分 -->
    <div class="header">
      <!-- 已经登录 -->
      <div class="has-login" v-show="false"></div>
      <!-- 还没有登录 -->
      <div class="un-login">
        <div class="login-btn" @click="toLogin">登录 / 注册</div>
      </div>
    </div>
    <!-- 卡券 -->
    <van-row>
      <van-col span="8"
        ><div>0</div>
        <div>积分</div></van-col
      >
      <van-col span="8"
        ><div>0</div>
        <div>卡</div></van-col
      >
      <van-col span="8"
        ><div>0</div>
        <div>优惠码</div></van-col
      >
    </van-row>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <!-- nanbar -->
     <div class="navbar">
      <div class="left">
        我的订单
      </div>
      <div class="right">
          <span>查看全部订单</span>
          <img src="imgs/back2.png" alt="" />
      </div>
    </div>
<van-grid :column-num="5">
  <van-grid-item v-for="value in 5" :key="value" icon="photo-o" text="文字" />
</van-grid>
    <!-- 正方形个子 -->
    <van-grid square>
      <van-grid-item
        v-for="value in 8"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid>
    <!-- 底部 -->
    <van-tabbar v-model="active" z-index="100" active-color="#ff8198" route>
      <van-tabbar-item name="home" icon="wap-home" to="/home"
        >首页</van-tabbar-item
      >
      <van-tabbar-item name="category" icon="wap-nav" to="/category"
        >分类</van-tabbar-item
      >
      <van-tabbar-item name="cart" icon="cart" to="/cart"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item name="profile" icon="manager" to="/profile"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.profile-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f5f5f5;
}
.header {
  z-index: 100;
  position: fixed;
  width: 100vw;
  height: 164px;
  color: #fff;
  background-color: #f4a460;
}
.header > div {
  height: 100%;
}
.un-login {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .login-btn {
  padding: 6px 24px;
  border-radius: 10px;
  background-color: rgb(36, 179, 23);
  position: absolute;
  top: 68px;
}
.header .has-login {
  display: flex;
  align-items: center;
}
/* 轮播 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 164px;
  text-align: center;
  background-color: #39a9ed;
}
/* 卡券 */
.van-row {
  margin-top: 174px;
  margin-bottom: 10px;
}
.van-col div {
  text-align: center;
  font-weight: 600;
  margin: 10px 0;
}
.navbar {
  display: flex;
  justify-content:space-between;
  width: 100vw;
  line-height: 44px;
  color:black;
  font-weight: 800;
}
.left{
    margin-left: 10px;
}

.right {
  font-size: 10px;
}
.right>img{
    width: 10px;
}
</style>